<template>
  <div class="app-manage-page">
    <!-- 页面头部 -->
    <div class="page-header">
      <div class="header-content">
        <h1 class="page-title">应用管理</h1>
        <p class="page-subtitle">管理系统中的所有代码生成应用</p>
      </div>
    </div>

     <!-- 搜索区域 -->
     <div class="search-section">
       <a-card class="search-card">
         <a-form 
           :model="searchParams" 
           @finish="doSearch" 
           :label-col="{ span: 6 }"
           :wrapper-col="{ span: 18 }"
           class="search-form"
         >
           <a-row :gutter="[24, 16]">
             <a-col :xs="24" :sm="12" :md="8" :lg="6">
               <a-form-item label="应用名称" class="search-item">
                 <a-input 
                   v-model:value="searchParams.appName" 
                   placeholder="请输入应用名称" 
                   allow-clear 
                   class="search-input"
                 >
                   <template #prefix>
                     <AppstoreOutlined class="input-icon" />
                   </template>
                 </a-input>
               </a-form-item>
             </a-col>
             <a-col :xs="24" :sm="12" :md="8" :lg="6">
               <a-form-item label="生成类型" class="search-item">
                 <a-select 
                   v-model:value="searchParams.codeGenType" 
                   placeholder="选择生成类型" 
                   allow-clear
                   class="search-input"
                 >
                   <a-select-option value="HTML">HTML</a-select-option>
                   <a-select-option value="VUE_PROJECT">Vue项目</a-select-option>
                   <a-select-option value="MULTI_FILE">多文件</a-select-option>
                 </a-select>
               </a-form-item>
             </a-col>
             <a-col :xs="24" :sm="12" :md="8" :lg="6">
               <a-form-item label="应用分类" class="search-item">
                 <a-select 
                   v-model:value="searchParams.appCategory" 
                   placeholder="选择应用分类" 
                   allow-clear
                   class="search-input"
                 >
                   <a-select-option value="效率工具">效率工具</a-select-option>
                   <a-select-option value="活动页面">活动页面</a-select-option>
                   <a-select-option value="网站">网站</a-select-option>
                   <a-select-option value="娱乐游戏">娱乐游戏</a-select-option>
                   <a-select-option value="用户应用">用户应用</a-select-option>
                   <a-select-option value="管理平台">管理平台</a-select-option>
                   <a-select-option value="数据可视化">数据可视化</a-select-option>
                   <a-select-option value="教育学习">教育学习</a-select-option>
                   <a-select-option value="电商平台">电商平台</a-select-option>
                   <a-select-option value="社交网络">社交网络</a-select-option>
                 </a-select>
               </a-form-item>
             </a-col>
             <a-col :xs="24" :sm="12" :md="8" :lg="6">
               <a-form-item label="优先级" class="search-item">
                 <a-select 
                   v-model:value="searchParams.priority" 
                   placeholder="选择优先级" 
                   allow-clear
                   class="search-input"
                 >
                   <a-select-option :value="1">高</a-select-option>
                   <a-select-option :value="2">中</a-select-option>
                   <a-select-option :value="3">低</a-select-option>
                 </a-select>
               </a-form-item>
             </a-col>
             <a-col :xs="24" :sm="12" :md="24" :lg="6">
               <a-form-item class="search-actions-item">
                 <div class="search-actions">
                   <a-button 
                     type="primary" 
                     html-type="submit" 
                     :loading="loading"
                     class="search-btn"
                   >
                     <template #icon>
                       <SearchOutlined />
                     </template>
                     搜索
                   </a-button>
                   <a-button @click="handleReset" class="reset-btn">
                     <template #icon>
                       <ReloadOutlined />
                     </template>
                     重置
                   </a-button>
                 </div>
               </a-form-item>
             </a-col>
           </a-row>
         </a-form>
       </a-card>
     </div>

     <!-- 应用列表区域 -->
     <div class="apps-section">
       <a-card class="apps-card">
         <div class="tabs-wrapper">
           <a-tabs v-model:activeKey="activeTab" @change="onTabChange" class="app-tabs">
             <a-tab-pane key="all" tab="全部应用">
               <template #tab>
                 <span>
                   <AppstoreOutlined />
                   全部应用 ({{ total }})
                 </span>
               </template>
             </a-tab-pane>
             <a-tab-pane key="featured" tab="精选应用">
               <template #tab>
                 <span>
                   <StarOutlined />
                   精选应用 ({{ featuredTotal }})
                 </span>
               </template>
             </a-tab-pane>
           </a-tabs>
         </div>

        <a-table
          :columns="columns"
          :data-source="dataList"
          :pagination="false"
          :loading="loading"
          row-key="id"
          class="apps-table"
        >
          <template #bodyCell="{ column, record }">
            <template v-if="column.dataIndex === 'appInfo'">
              <div class="app-info-cell">
                <div class="app-cover">
                  <img 
                    v-if="record.cover" 
                    :src="record.cover" 
                    :alt="record.appName"
                    class="cover-image"
                  />
                  <div v-else class="default-cover">
                    <AppstoreOutlined />
                  </div>
                </div>
                <div class="app-details">
                  <div class="app-name">{{ record.appName || '未命名应用' }}</div>
                  <div class="app-id">ID: {{ record.id }}</div>
                </div>
              </div>
            </template>
            
            <template v-if="column.dataIndex === 'appCategory'">
              <div class="category-cell">
                <a-tag 
                  v-if="record.appCategory" 
                  color="blue" 
                  class="category-tag"
                >
                  {{ record.appCategory }}
                </a-tag>
                <span v-else class="no-category">未分类</span>
              </div>
            </template>
            
            <template v-if="column.dataIndex === 'codeGenType'">
              <a-tag 
                :color="getTypeColor(record.codeGenType)" 
                class="type-tag"
              >
                {{ getTypeLabel(record.codeGenType) }}
              </a-tag>
            </template>
            
             <template v-if="column.dataIndex === 'priority'">
               <div class="priority-cell">
                 <a-tag 
                   :color="getPriorityColor(record.priority)" 
                   class="priority-tag"
                 >
                   <template #icon>
                     <component :is="getPriorityIcon(record.priority)" />
                   </template>
                   {{ getPriorityLabel(record.priority) }}
                 </a-tag>
                 <div class="priority-actions">
                   <a-button 
                     v-if="(!record.priority || record.priority === 0) && record.deployKey"
                     type="link" 
                     size="small"
                     @click="setFeatured(record)"
                     class="feature-btn"
                   >
                     设为精选
                   </a-button>
                   <a-button 
                     v-else-if="record.priority && record.priority > 0 && record.deployKey"
                     type="link" 
                     size="small"
                     @click="removeFeatured(record)"
                     class="remove-feature-btn"
                   >
                     取消精选
                   </a-button>
                   <span v-else-if="!record.deployKey" class="deploy-required-text">
                     需先部署
                   </span>
                 </div>
               </div>
             </template>
            
            <template v-if="column.dataIndex === 'deployStatus'">
              <div class="deploy-status">
                <a-tag 
                  v-if="record.deployKey" 
                  color="success" 
                  class="status-tag"
                >
                  <template #icon>
                    <CheckCircleOutlined />
                  </template>
                  已部署
                </a-tag>
                <a-tag v-else color="default" class="status-tag">
                  <template #icon>
                    <ClockCircleOutlined />
                  </template>
                  未部署
                </a-tag>
                <div v-if="record.deployedTime" class="deploy-time">
                  {{ formatDate(record.deployedTime) }}
                </div>
              </div>
            </template>
            
            <template v-if="column.dataIndex === 'userInfo'">
              <div class="user-info-cell">
                <a-avatar 
                  :size="32" 
                  :src="record.user?.userAvatar"
                  class="user-avatar"
                >
                  <template #icon>
                    <UserOutlined />
                  </template>
                </a-avatar>
                <div class="user-details">
                  <div class="user-name">{{ record.user?.userName || '未知用户' }}</div>
                  <div class="user-account">{{ record.user?.userAccount }}</div>
                </div>
              </div>
            </template>
            
            <template v-if="column.dataIndex === 'createTime'">
              <div class="time-cell">
                <div class="date">{{ formatDate(record.createTime) }}</div>
                <div class="time">{{ formatTime(record.createTime) }}</div>
              </div>
            </template>
            
            <template v-if="column.dataIndex === 'action'">
              <div class="action-buttons">
                <a-tooltip title="查看详情">
                  <a-button 
                    type="text" 
                    size="small" 
                    @click="viewApp(record)"
                    class="action-btn view-btn"
                  >
                    <template #icon>
                      <EyeOutlined />
                    </template>
                  </a-button>
                </a-tooltip>
                <a-tooltip title="编辑应用">
                  <a-button 
                    type="text" 
                    size="small" 
                    @click="editApp(record)"
                    class="action-btn edit-btn"
                  >
                    <template #icon>
                      <EditOutlined />
                    </template>
                  </a-button>
                </a-tooltip>
                <a-tooltip v-if="!record.deployKey" title="部署应用">
                  <a-button 
                    type="text" 
                    size="small" 
                    @click="deployAppAction(record)"
                    :loading="deployingIds.includes(record.id)"
                    class="action-btn deploy-btn"
                  >
                    <template #icon>
                      <CloudUploadOutlined />
                    </template>
                  </a-button>
                </a-tooltip>
                <a-tooltip v-else title="访问应用">
                  <a-button 
                    type="text" 
                    size="small" 
                    @click="visitApp(record)"
                    class="action-btn visit-btn"
                  >
                    <template #icon>
                      <LinkOutlined />
                    </template>
                  </a-button>
                </a-tooltip>
                <a-tooltip title="删除应用">
                  <a-button 
                    type="text" 
                    size="small" 
                    danger
                    @click="doDelete(record.id)"
                    class="action-btn delete-btn"
                  >
                    <template #icon>
                      <DeleteOutlined />
                    </template>
                  </a-button>
                </a-tooltip>
              </div>
            </template>
          </template>
        </a-table>

         <!-- 分页 -->
         <div class="pagination-wrapper">
           <a-pagination
             v-model:current="searchParams.current"
             v-model:page-size="searchParams.pageSize"
             :total="activeTab === 'featured' ? featuredTotal : total"
             show-size-changer
             show-quick-jumper
             :show-total="(currentTotal, range) => `第 ${range[0]}-${range[1]} 条，共 ${currentTotal} 条`"
             @change="onPageChange"
             @show-size-change="onPageSizeChange"
             class="pagination"
           />
         </div>
      </a-card>
    </div>


    <!-- 编辑应用弹窗 -->
    <a-modal
      v-model:open="showEditModal"
      title="编辑应用"
      :confirm-loading="editLoading"
      @ok="handleEditApp"
      @cancel="resetEditForm"
      width="600px"
      class="edit-modal"
    >
      <a-form
        ref="editFormRef"
        :model="editForm"
        :rules="editRules"
        layout="vertical"
        class="edit-form"
      >
        <a-form-item name="appName" label="应用名称">
          <a-input
            v-model:value="editForm.appName"
            placeholder="请输入应用名称"
          />
        </a-form-item>
        <a-form-item name="cover" label="应用封面">
          <a-input
            v-model:value="editForm.cover"
            placeholder="请输入封面图片URL"
          />
        </a-form-item>
        <a-form-item name="priority" label="优先级">
          <a-select
            v-model:value="editForm.priority"
            placeholder="选择优先级"
          >
            <a-select-option :value="0">未设置</a-select-option>
            <a-select-option :value="1">高</a-select-option>
            <a-select-option :value="2">中</a-select-option>
            <a-select-option :value="3">低</a-select-option>
          </a-select>
        </a-form-item>
      </a-form>
    </a-modal>

    <!-- 应用详情弹窗 -->
    <a-modal
      v-model:open="showDetailModal"
      title="应用详情"
      :footer="null"
      width="800px"
      class="detail-modal"
    >
      <div v-if="currentApp" class="app-detail">
        <div class="detail-header">
          <div class="app-cover-large">
            <img 
              v-if="currentApp.cover" 
              :src="currentApp.cover" 
              :alt="currentApp.appName"
              class="cover-image-large"
            />
            <div v-else class="default-cover-large">
              <AppstoreOutlined />
            </div>
          </div>
          <div class="app-info-large">
            <h2 class="app-title">{{ currentApp.appName || '未命名应用' }}</h2>
            <div class="app-meta">
              <a-tag :color="getTypeColor(currentApp.codeGenType)">
                {{ getTypeLabel(currentApp.codeGenType) }}
              </a-tag>
              <a-tag :color="getPriorityColor(currentApp.priority)">
                {{ getPriorityLabel(currentApp.priority) }}
              </a-tag>
              <a-tag v-if="currentApp.deployKey" color="success">已部署</a-tag>
              <a-tag v-else color="default">未部署</a-tag>
            </div>
          </div>
        </div>
        
        <a-divider />
        
        <div class="detail-content">
          <a-descriptions :column="2" bordered>
            <a-descriptions-item label="应用ID">{{ currentApp.id }}</a-descriptions-item>
            <a-descriptions-item label="创建者">
              <div class="creator-info">
                <a-avatar :size="24" :src="currentApp.user?.userAvatar">
                  <template #icon><UserOutlined /></template>
                </a-avatar>
                <span class="creator-name">{{ currentApp.user?.userName || '未知用户' }}</span>
              </div>
            </a-descriptions-item>
            <a-descriptions-item label="创建时间">{{ formatDateTime(currentApp.createTime) }}</a-descriptions-item>
            <a-descriptions-item label="更新时间">{{ formatDateTime(currentApp.updateTime) }}</a-descriptions-item>
            <a-descriptions-item v-if="currentApp.deployedTime" label="部署时间">{{ formatDateTime(currentApp.deployedTime) }}</a-descriptions-item>
            <a-descriptions-item v-if="currentApp.deployKey" label="部署密钥">
              <a-typography-text code copyable>{{ currentApp.deployKey }}</a-typography-text>
            </a-descriptions-item>
          </a-descriptions>
          
          <div class="prompt-section">
            <h3>初始提示词</h3>
            <div class="prompt-content">
              {{ currentApp.initPrompt || '暂无提示词' }}
            </div>
          </div>
        </div>
      </div>
    </a-modal>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, computed, h } from 'vue'
import { message, Modal } from 'ant-design-vue'
import type { TableColumnProps } from 'ant-design-vue'
 import {
   SearchOutlined,
   ReloadOutlined,
   AppstoreOutlined,
   StarOutlined,
   UserOutlined,
   EyeOutlined,
   EditOutlined,
   DeleteOutlined,
   CloudUploadOutlined,
   LinkOutlined,
   CheckCircleOutlined,
   ClockCircleOutlined,
   ExclamationCircleOutlined,
   ArrowUpOutlined,
   MinusOutlined,
   ArrowDownOutlined
 } from '@ant-design/icons-vue'
 import { 
   listAppByPage, 
   listGoodAppVoByPage,
   deleteApp, 
   updateAppByAdmin,
   deployApp
 } from '@/api/appController'

 // 响应式数据
 const loading = ref(false)
 const editLoading = ref(false)
 const deployingIds = ref<number[]>([])
 const dataList = ref<API.App[]>([])
 const total = ref(0)
 const featuredTotal = ref(0)
 const activeTab = ref('all')
 
 // 弹窗状态
 const showEditModal = ref(false)
 const showDetailModal = ref(false)
 const currentApp = ref<API.App | null>(null)
 
 // 表单引用
 const editFormRef = ref()

// 搜索参数
const searchParams = reactive<API.AppQueryRequest>({
  current: 1,
  pageSize: 10,
  appName: undefined,
  appCategory: undefined,
  codeGenType: undefined,
  priority: undefined
})

 // 编辑表单
const editForm = reactive({
  id: undefined as number | undefined,
  appName: '',
  cover: '',
  priority: undefined as number | undefined
})

 // 表单验证规则
 const editRules = {
  appName: [
    { max: 50, message: '应用名称不能超过50个字符', trigger: 'blur' }
  ]
}


// 表格列配置
const columns: TableColumnProps[] = [
  {
    title: '应用信息',
    dataIndex: 'appInfo',
    key: 'appInfo',
    width: 250,
    fixed: 'left'
  },
  {
    title: '应用分类',
    dataIndex: 'appCategory',
    key: 'appCategory',
    width: 120,
    align: 'center'
  },
  {
    title: '生成类型',
    dataIndex: 'codeGenType',
    key: 'codeGenType',
    width: 120,
    align: 'center'
  },
   {
     title: '精选状态',
     dataIndex: 'priority',
     key: 'priority',
     width: 150,
     align: 'center'
   },
  {
    title: '部署状态',
    dataIndex: 'deployStatus',
    key: 'deployStatus',
    width: 150,
    align: 'center'
  },
  {
    title: '创建者',
    dataIndex: 'userInfo',
    key: 'userInfo',
    width: 180
  },
  {
    title: '创建时间',
    dataIndex: 'createTime',
    key: 'createTime',
    width: 150,
    align: 'center'
  },
  {
    title: '操作',
    dataIndex: 'action',
    key: 'action',
    width: 200,
    align: 'center',
    fixed: 'right'
  }
]

 // 获取数据
 const fetchData = async () => {
   loading.value = true
   try {
     let res
     if (activeTab.value === 'featured') {
       // 获取精选应用
       res = await listGoodAppVoByPage(searchParams)
       if (res.data.code === 0 && res.data.data) {
         dataList.value = res.data.data.records || []
         featuredTotal.value = res.data.data.totalRow || 0
       }
     } else {
       // 获取全部应用
       res = await listAppByPage(searchParams)
       if (res.data.code === 0 && res.data.data) {
         dataList.value = res.data.data.records || []
         total.value = res.data.data.totalRow || 0
       }
     }
     
     if (res.data.code !== 0) {
       message.error('获取数据失败：' + res.data.message)
     }
   } catch (error) {
     console.error('获取应用列表失败:', error)
     message.error('获取数据失败，请稍后重试')
   } finally {
     loading.value = false
   }
 }
 
 // 标签页切换
 const onTabChange = (key: string) => {
   activeTab.value = key
   searchParams.current = 1
   fetchData()
 }

 // 获取标签页统计数据
 const fetchTabStats = async () => {
   try {
     // 同时获取全部应用和精选应用的总数
     const [allRes, featuredRes] = await Promise.all([
       listAppByPage({ current: 1, pageSize: 1 }),
       listGoodAppVoByPage({ current: 1, pageSize: 1 })
     ])
     
     if (allRes.data.code === 0 && allRes.data.data) {
       total.value = allRes.data.data.totalRow || 0
     }
     
     if (featuredRes.data.code === 0 && featuredRes.data.data) {
       featuredTotal.value = featuredRes.data.data.totalRow || 0
     }
   } catch (error) {
     console.error('获取统计数据失败:', error)
   }
 }
 
 // 页面加载时获取数据
 onMounted(async () => {
   await fetchTabStats() // 先获取统计数据
   fetchData() // 再获取列表数据
 })

// 分页处理
const onPageChange = (page: number, pageSize: number) => {
  searchParams.current = page
  searchParams.pageSize = pageSize
  fetchData()
}

const onPageSizeChange = (current: number, size: number) => {
  searchParams.current = 1
  searchParams.pageSize = size
  fetchData()
}

// 搜索
const doSearch = () => {
  searchParams.current = 1
  fetchData()
}

// 重置搜索
const handleReset = () => {
  searchParams.appName = undefined
  searchParams.appCategory = undefined
  searchParams.codeGenType = undefined
  searchParams.priority = undefined
  searchParams.current = 1
  fetchData()
}

// 删除应用
const doDelete = async (id: number) => {
  if (!id) return
  
  Modal.confirm({
    title: '确认删除',
    content: '确定要删除这个应用吗？此操作不可恢复。',
    icon: h(ExclamationCircleOutlined),
    okText: '确认删除',
    okType: 'danger',
    cancelText: '取消',
     onOk: async () => {
       try {
         const res = await deleteApp({ id })
         if (res.data.code === 0) {
           message.success('删除成功')
           await fetchTabStats() // 更新统计数据
           fetchData()
         } else {
           message.error('删除失败：' + res.data.message)
         }
       } catch (error) {
         console.error('删除应用失败:', error)
         message.error('删除失败，请稍后重试')
       }
     }
  })
}

// 查看应用详情
const viewApp = (app: API.App) => {
  currentApp.value = app
  showDetailModal.value = true
}

// 编辑应用
const editApp = (app: API.App) => {
  editForm.id = app.id
  editForm.appName = app.appName || ''
  editForm.cover = app.cover || ''
  editForm.priority = app.priority
  showEditModal.value = true
}

// 部署应用
const deployAppAction = async (app: API.App) => {
  if (!app.id) return
  
  deployingIds.value.push(app.id)
  try {
    const res = await deployApp({ appId: app.id })
    if (res.data.code === 0) {
      message.success('应用部署成功')
      fetchData()
    } else {
      message.error('部署失败：' + res.data.message)
    }
  } catch (error) {
    console.error('部署应用失败:', error)
    message.error('部署失败，请稍后重试')
  } finally {
    deployingIds.value = deployingIds.value.filter(id => id !== app.id)
  }
}

// 访问应用
const visitApp = (app: API.App) => {
  if (app.deployKey) {
    const url = `${window.location.origin}/api/static/${app.deployKey}/`
    window.open(url, '_blank')
  }
}

 
 // 设置精选应用
 const setFeatured = async (app: API.App) => {
   try {
     const res = await updateAppByAdmin({
       id: app.id,
       priority: 2 // 默认设置为中优先级
     })
     if (res.data.code === 0) {
       message.success('已设为精选应用')
       await fetchTabStats() // 更新统计数据
       fetchData()
     } else {
       message.error('设置失败：' + res.data.message)
     }
   } catch (error) {
     console.error('设置精选应用失败:', error)
     message.error('设置失败，请稍后重试')
   }
 }
 
 // 取消精选应用
 const removeFeatured = async (app: API.App) => {
   try {
     const res = await updateAppByAdmin({
       id: app.id,
       priority: 0 // 设置为0表示非精选
     })
     if (res.data.code === 0) {
       message.success('已取消精选')
       await fetchTabStats() // 更新统计数据
       fetchData()
     } else {
       message.error('取消失败：' + res.data.message)
     }
   } catch (error) {
     console.error('取消精选应用失败:', error)
     message.error('取消失败，请稍后重试')
   }
 }


// 更新应用
const handleEditApp = async () => {
  try {
    await editFormRef.value.validate()
    editLoading.value = true
    
    const res = await updateAppByAdmin(editForm)
    if (res.data.code === 0) {
      message.success('应用更新成功')
      showEditModal.value = false
      resetEditForm()
      fetchData()
    } else {
      message.error('更新失败：' + res.data.message)
    }
  } catch (error) {
    console.error('更新应用失败:', error)
    message.error('更新失败，请稍后重试')
  } finally {
    editLoading.value = false
  }
}

 // 重置编辑表单
const resetEditForm = () => {
  editForm.id = undefined
  editForm.appName = ''
  editForm.cover = ''
  editForm.priority = undefined
  editFormRef.value?.clearValidate()
}

// 工具函数
const getTypeColor = (type: string) => {
  const colors = {
    'HTML': 'orange',
    'VUE_PROJECT': 'green',
    'MULTI_FILE': 'blue'
  }
  return colors[type as keyof typeof colors] || 'default'
}

const getTypeLabel = (type: string) => {
  const labels = {
    'HTML': 'HTML',
    'VUE_PROJECT': 'Vue项目',
    'MULTI_FILE': '多文件'
  }
  return labels[type as keyof typeof labels] || type
}

const getPriorityColor = (priority: number) => {
  const colors = {
    0: 'default',
    1: 'red',
    2: 'orange', 
    3: 'default'
  }
  return colors[priority as keyof typeof colors] || 'default'
}

const getPriorityLabel = (priority: number) => {
  const labels = {
    0: '未设置',
    1: '高',
    2: '中',
    3: '低'
  }
  return labels[priority as keyof typeof labels] || '未设置'
}

const getPriorityIcon = (priority: number) => {
  const icons = {
    1: ArrowUpOutlined,
    2: MinusOutlined,
    3: ArrowDownOutlined
  }
  return icons[priority as keyof typeof icons] || MinusOutlined
}

const formatDate = (dateStr: string) => {
  if (!dateStr) return '-'
  return new Date(dateStr).toLocaleDateString('zh-CN')
}

const formatTime = (dateStr: string) => {
  if (!dateStr) return '-'
  return new Date(dateStr).toLocaleTimeString('zh-CN', { 
    hour: '2-digit', 
    minute: '2-digit' 
  })
}

const formatDateTime = (dateStr: string) => {
  if (!dateStr) return '-'
  return new Date(dateStr).toLocaleString('zh-CN')
}
</script>

<style lang="scss" scoped>
.app-manage-page {
  padding: 24px;
  background: #f5f5f5;
  min-height: 100vh;
}

  .page-header {
    margin-bottom: 24px;
  
  .header-content {
    .page-title {
      font-size: 28px;
      font-weight: 700;
      margin: 0 0 8px 0;
      color: #333;
    }
    
    .page-subtitle {
      font-size: 16px;
      color: #666;
      margin: 0;
    }
  }
 }

 .search-section {
   margin-bottom: 24px;
   
   .search-card {
     border-radius: 12px;
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
     
     .search-form {
       .search-item {
         margin-bottom: 16px;
         
         :deep(.ant-form-item-label) {
           font-weight: 500;
           color: #333;
           text-align: right;
           padding-right: 12px;
         }
         
         :deep(.ant-form-item-control) {
           .ant-form-item-control-input {
             min-height: 32px;
           }
         }
       }
       
       .search-actions-item {
         margin-bottom: 16px;
         
         :deep(.ant-form-item-control) {
           .ant-form-item-control-input {
             display: flex;
             justify-content: flex-start;
             align-items: center;
           }
         }
       }
       
       .search-input {
         width: 100%;
         
         .input-icon {
           color: #999;
         }
       }
       
       .search-actions {
         display: flex;
         gap: 12px;
         
         .search-btn {
           background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
           border: none;
           padding: 0 20px;
           height: 32px;
           
           &:hover {
             transform: translateY(-1px);
             box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
           }
         }
         
         .reset-btn {
           padding: 0 16px;
           height: 32px;
           
           &:hover {
             color: #667eea;
             border-color: #667eea;
           }
         }
       }
     }
   }
 }

 .apps-section {
   .apps-card {
     border-radius: 12px;
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
     
     .tabs-wrapper {
       margin-bottom: 24px;
       
       .app-tabs {
         :deep(.ant-tabs-tab) {
           font-weight: 500;
           
           .anticon {
             margin-right: 8px;
           }
         }
         
         :deep(.ant-tabs-tab-active) {
           color: #667eea;
         }
         
         :deep(.ant-tabs-ink-bar) {
           background: #667eea;
         }
       }
     }
   }
 }

.apps-table {
  :deep(.ant-table) {
    .ant-table-thead > tr > th {
      background: #fafafa;
      font-weight: 600;
      color: #333;
      border-bottom: 2px solid #f0f0f0;
    }
    
    .ant-table-tbody > tr {
      &:hover > td {
        background: #f8f9ff !important;
      }
    }
  }
}

.app-info-cell {
  display: flex;
  align-items: center;
  gap: 12px;
  
  .app-cover {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
    
    .cover-image {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    
    .default-cover {
      width: 100%;
      height: 100%;
      background: linear-gradient(135deg, #f0f0f0 0%, #e0e0e0 100%);
      display: flex;
      align-items: center;
      justify-content: center;
      color: #999;
      font-size: 20px;
    }
  }
  
  .app-details {
    flex: 1;
    min-width: 0;
    
    .app-name {
      font-weight: 500;
      color: #333;
      margin-bottom: 4px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    
    .app-id {
      font-size: 12px;
      color: #999;
    }
  }
}

.user-info-cell {
  display: flex;
  align-items: center;
  gap: 8px;
  
  .user-avatar {
    flex-shrink: 0;
  }
  
  .user-details {
    flex: 1;
    min-width: 0;
    
    .user-name {
      font-size: 13px;
      color: #333;
      margin-bottom: 2px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    
    .user-account {
      font-size: 11px;
      color: #999;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
}

.deploy-status {
  .status-tag {
    margin-bottom: 4px;
  }
  
  .deploy-time {
    font-size: 11px;
    color: #999;
  }
}

 .type-tag, .priority-tag, .category-tag {
   font-weight: 500;
   
   .anticon {
     margin-right: 4px;
   }
 }

 .category-cell {
   display: flex;
   justify-content: center;
   align-items: center;
   
   .category-tag {
     border-radius: 12px;
     font-size: 12px;
   }
   
   .no-category {
     color: #999;
     font-size: 12px;
     font-style: italic;
   }
 }
 
 .priority-cell {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 8px;
   
   .priority-actions {
     .feature-btn {
       color: #52c41a;
       padding: 0;
       font-size: 12px;
       
       &:hover {
         color: #73d13d;
       }
     }
     
     .remove-feature-btn {
       color: #ff4d4f;
       padding: 0;
       font-size: 12px;
       
       &:hover {
         color: #ff7875;
       }
     }
     
     .deploy-required-text {
       color: #999;
       font-size: 12px;
       font-style: italic;
     }
   }
 }

.time-cell {
  .date {
    font-weight: 500;
    color: #333;
    margin-bottom: 2px;
    font-size: 13px;
  }
  
  .time {
    font-size: 11px;
    color: #999;
  }
}

.action-buttons {
  display: flex;
  gap: 4px;
  justify-content: center;
  flex-wrap: wrap;
  
  .action-btn {
    padding: 4px 8px;
    border-radius: 6px;
    transition: all 0.2s;
    
    &.view-btn:hover {
      background: #e6f7ff;
      color: #1890ff;
    }
    
    &.edit-btn:hover {
      background: #fff7e6;
      color: #fa8c16;
    }
    
    &.deploy-btn:hover {
      background: #f6ffed;
      color: #52c41a;
    }
    
     &.visit-btn:hover {
       background: #f0f5ff;
       color: #722ed1;
     }
     
     &.delete-btn:hover {
      background: #fff2f0;
      color: #ff4d4f;
      transform: translateY(-1px);
    }
  }
}

.pagination-wrapper {
  display: flex;
  justify-content: center;
  margin-top: 24px;
  
  .pagination {
    :deep(.ant-pagination-item-active) {
      border-color: #667eea;
      background: #667eea;
    }
    
    :deep(.ant-pagination-item:hover) {
      border-color: #667eea;
    }
    
    :deep(.ant-pagination-next:hover .ant-pagination-item-link),
    :deep(.ant-pagination-prev:hover .ant-pagination-item-link) {
      color: #667eea;
      border-color: #667eea;
    }
  }
}

// 弹窗样式
.add-modal, .edit-modal, .detail-modal {
  :deep(.ant-modal-header) {
    border-bottom: 1px solid #f0f0f0;
    padding: 20px 24px;
  }
  
  :deep(.ant-modal-body) {
    padding: 24px;
  }
}

.app-detail {
  .detail-header {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
    
    .app-cover-large {
      width: 120px;
      height: 120px;
      border-radius: 12px;
      overflow: hidden;
      flex-shrink: 0;
      
      .cover-image-large {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
      
      .default-cover-large {
        width: 100%;
        height: 100%;
        background: linear-gradient(135deg, #f0f0f0 0%, #e0e0e0 100%);
        display: flex;
        align-items: center;
        justify-content: center;
        color: #999;
        font-size: 48px;
      }
    }
    
    .app-info-large {
      flex: 1;
      
      .app-title {
        font-size: 24px;
        font-weight: 600;
        margin: 0 0 16px 0;
        color: #333;
      }
      
      .app-meta {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
      }
    }
  }
  
  .detail-content {
    .creator-info {
      display: flex;
      align-items: center;
      gap: 8px;
      
      .creator-name {
        color: #333;
      }
    }
    
    .prompt-section {
      margin-top: 24px;
      
      h3 {
        font-size: 16px;
        font-weight: 600;
        margin: 0 0 12px 0;
        color: #333;
      }
      
      .prompt-content {
        background: #fafafa;
        border: 1px solid #f0f0f0;
        border-radius: 8px;
        padding: 16px;
        line-height: 1.6;
        color: #666;
        white-space: pre-wrap;
        word-break: break-word;
      }
    }
  }
}

// 响应式设计
@media (max-width: 768px) {
  .app-manage-page {
    padding: 16px;
  }
  
  .page-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    
    .header-content .page-title {
      font-size: 24px;
    }
    
    .header-stats {
      align-self: stretch;
      
      .stat-item {
        flex: 1;
      }
    }
  }
  
   .search-section {
     .search-card {
       .search-form {
         .search-actions-item {
           :deep(.ant-form-item-control) {
             .ant-form-item-control-input {
               justify-content: center;
             }
           }
         }
       }
     }
   }
  
  .apps-section {
    .stats-bar {
      flex-direction: column;
      gap: 16px;
      align-items: stretch;
    }
  }
  
  .apps-table {
    :deep(.ant-table) {
      .ant-table-thead > tr > th,
      .ant-table-tbody > tr > td {
        padding: 12px 8px;
      }
    }
  }
  
  .action-buttons {
    flex-direction: column;
    gap: 4px;
  }
  
  .app-detail {
    .detail-header {
      flex-direction: column;
      align-items: center;
      text-align: center;
    }
  }
}

@media (max-width: 576px) {
  .header-stats {
    flex-direction: column;
    gap: 8px;
  }
  
  .action-buttons {
    .action-btn {
      font-size: 12px;
      padding: 2px 6px;
    }
  }
}
</style>
